<template>
    <div class="data-display-container">
        <!-- 页面标题 -->
        <div class="page-header">
            <h2>数据展示</h2>
            <p class="page-description">实时展示实验室环境数据和设备状态</p>
        </div>

        <!-- 刷新控制栏 -->
        <div class="refresh-controls">
            <div class="refresh-info">
                <span v-if="lastUpdateTime" class="last-update">
                    最后更新：{{ lastUpdateTime }}
                </span>
                <el-switch v-model="autoRefreshEnabled" @change="toggleAutoRefresh" active-text="自动刷新"
                    inactive-text="手动刷新" style="margin-left: 20px;" />
            </div>
            <div class="refresh-actions">
                <el-button type="primary" :icon="isRefreshing ? Loading : Refresh" :loading="isRefreshing"
                    @click="manualRefresh" size="small">
                    {{ isRefreshing ? '刷新中...' : '手动刷新' }}
                </el-button>
                <el-select v-model="refreshInterval" @change="updateRefreshInterval" size="small"
                    style="width: 120px; margin-left: 10px;">
                    <el-option label="10秒" :value="10000" />
                    <el-option label="30秒" :value="30000" />
                    <el-option label="1分钟" :value="60000" />
                    <el-option label="5分钟" :value="300000" />
                </el-select>
            </div>
        </div>

        <!-- 数据概览卡片 -->
        <div class="overview-cards">
            <!-- 实时温度 -->
            <el-card class="stat-card">
                <div class="card-content">
                    <div class="card-icon" style="background: #e6f7ff;">
                        <el-icon size="24" color="#1890ff">
                            <Sunny />
                        </el-icon>
                    </div>
                    <div class="card-info">
                        <div class="card-value">{{ displayData.temperature }}°C</div>
                        <div class="card-label">实时温度</div>
                    </div>
                </div>
            </el-card>

            <!-- 实时湿度 -->
            <el-card class="stat-card">
                <div class="card-content">
                    <div class="card-icon" style="background: #f6ffed;">
                        <el-icon size="24" color="#52c41a">
                            <svg t="1758615939216" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="5289" width="200" height="200">
                                <path
                                    d="M512 17.066667C419.271111 17.066667 124.586667 369.777778 124.586667 609.848889c0 218.453333 174.08 397.084444 387.413333 397.084444 213.333333 0 387.413333-178.631111 387.413333-397.084444C899.413333 369.777778 604.728889 17.066667 512 17.066667z m313.457778 592.782222c0 177.493333-140.515556 321.991111-313.457778 321.991111s-313.457778-144.497778-313.457778-321.991111C198.542222 392.533333 459.093333 117.191111 512 93.297778c52.906667 23.893333 313.457778 299.235556 313.457778 516.551111z"
                                    fill="#B7B7B7" p-id="5290"></path>
                                <path
                                    d="M383.431111 621.226667c-5.12-13.653333-17.635556-23.893333-31.857778-26.168889s-29.582222 3.413333-38.684444 14.791111c-9.102222 11.377778-11.377778 27.306667-6.257778 40.96a327.111111 327.111111 0 0 0 192.284445 191.146667 41.415111 41.415111 0 0 0 54.613333-32.426667 40.96 40.96 0 0 0-26.737778-46.08c-65.991111-23.893333-117.76-76.231111-143.36-142.222222z"
                                    fill="#B7B7B7" p-id="5291"></path>
                            </svg>
                        </el-icon>
                    </div>
                    <div class="card-info">
                        <div class="card-value">{{ displayData.humidity }}%</div>
                        <div class="card-label">实时湿度</div>
                    </div>
                </div>
            </el-card>

            <!-- 烟雾浓度 -->
            <el-card class="stat-card">
                <div class="card-content">
                    <div class="card-icon" style="background: #fff7e6;">
                        <el-icon size="24" color="#fa8c16">
                            <TrendCharts />
                        </el-icon>
                    </div>
                    <div class="card-info">
                        <div class="card-value">{{ displayData.smokeScope }}%</div>
                        <div class="card-label">烟雾浓度</div>
                    </div>
                </div>
            </el-card>

            <!-- 工位占用 -->
            <el-card class="stat-card">
                <div class="card-content">
                    <div class="card-icon" style="background: #f9f0ff;">
                        <el-icon size="24" color="#722ed1">
                            <User />
                        </el-icon>
                    </div>
                    <div class="card-info">
                        <div class="card-value">{{ displayData.curStudentNum }}/{{ displayData.maxWorkstation }}</div>
                        <div class="card-label">当前工位数</div>
                    </div>
                </div>
            </el-card>
        </div>

        <!-- 图表区域 -->
        <div class="chart-section">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-card :header="`${displayData.labName} 温湿度趋势图`">
                        <div class="chart-placeholder">
                            <el-icon size="48" color="#c0c4cc">
                                <TrendCharts />
                            </el-icon>
                            <p>温湿度趋势图表</p>
                            <p style="font-size: 12px; color: #909399;">内容开发中...</p>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card :header="`${displayData.labName} 设备状态分布`">
                        <div class="chart-placeholder">
                            <el-icon size="48" color="#c0c4cc">
                                <PieChart />
                            </el-icon>
                            <p>设备状态分布图表</p>
                            <p style="font-size: 12px; color: #909399;">内容开发中...</p>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <!-- 数据表格区域 -->
        <el-card :header="`${displayData.labName} 设备详细数据`" style="margin-bottom: 20px;">
            <div class="table-placeholder">
                <el-icon size="48" color="#c0c4cc">
                    <DataBoard />
                </el-icon>
                <p>设备详细数据表格</p>
                <p style="font-size: 12px; color: #909399;">内容开发中...</p>
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

// 图标引入
import {
    User,
    TrendCharts,
    PieChart,
    Sunny,
    Refresh,
    Loading,
    DataBoard
} from '@element-plus/icons-vue'

// axios引入
import request from '@/utils/request'

const router = useRouter()

// 实时刷新相关变量
const isRefreshing = ref(false)
const autoRefreshEnabled = ref(true)
const refreshInterval = ref(30000) // 30秒刷新一次
let refreshTimer = null
const lastUpdateTime = ref('')

// 显示数据
const displayData = reactive({
    labName: '加载中...',
    labLocation: '',
    maxWorkstation: 50,
    curStudentNum: 0,
    temperature: 0,
    humidity: 0,
    smokeScope: 0,
    modifyTime: null
})

// 刷新相关方法
const updateLastUpdateTime = () => {
    const now = new Date()
    lastUpdateTime.value = now.toLocaleTimeString('zh-CN', {
        hour12: false,
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
    })
}

const startAutoRefresh = () => {
    if (refreshTimer) {
        clearInterval(refreshTimer)
    }
    if (autoRefreshEnabled.value) {
        refreshTimer = setInterval(() => {
            fetchData()
        }, refreshInterval.value)
    }
}

const stopAutoRefresh = () => {
    if (refreshTimer) {
        clearInterval(refreshTimer)
        refreshTimer = null
    }
}

const toggleAutoRefresh = (enabled) => {
    if (enabled) {
        startAutoRefresh()
    } else {
        stopAutoRefresh()
    }
}

const updateRefreshInterval = () => {
    if (autoRefreshEnabled.value) {
        startAutoRefresh()
    }
}

const manualRefresh = async () => {
    if (isRefreshing.value) return
    await fetchData()
}

// 数据获取方法
const fetchData = async () => {
    if (isRefreshing.value) return

    isRefreshing.value = true
    try {
        // 获取实验室和工位基础数据
        const response = await request.get('/env/admin/query')
        const resData = response.data

        console.log("数据展示页面获取基础数据:", resData)

        if (resData.state === 200 && resData.data) {
            // 赋值基础数据
            Object.assign(displayData, resData.data)
            // 确保总工位为50
            displayData.maxWorkstation = 50
            displayData.curStudentNum = resData.data.workstations?.length || 0
        } else {
            console.log('数据获取失败：' + resData.message)
            ElMessage.error('数据获取失败：' + resData.message)
        }

        // 更新最后更新时间
        updateLastUpdateTime()

    } catch (error) {
        console.log('接口请求失败：' + error.message)
        ElMessage.error('数据获取失败，请检查网络连接')
    } finally {
        isRefreshing.value = false
    }
}

// 页面加载时初始化数据
onMounted(async () => {
    await fetchData()
    // 启动自动刷新
    startAutoRefresh()
})

// 页面卸载时清理定时器
onUnmounted(() => {
    stopAutoRefresh()
})
</script>

<style scoped>
.data-display-container {
    padding: 15px;
}

.page-header {
    margin-bottom: 20px;
    text-align: center;
}

.page-header h2 {
    color: #303133;
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.page-description {
    color: #606266;
    font-size: 16px;
    margin: 0;
}

.refresh-controls {
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.refresh-info {
    display: flex;
    align-items: center;
}

.last-update {
    color: #6c757d;
    font-size: 14px;
}

.refresh-actions {
    display: flex;
    align-items: center;
}

.overview-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 15px;
}

.stat-card {
    border-radius: 8px;
}

.card-content {
    display: flex;
    align-items: center;
    padding: 10px;
}

.card-icon {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

.card-value {
    font-size: 24px;
    font-weight: bold;
    color: #303133;
}

.card-label {
    font-size: 14px;
    color: #909399;
    margin-top: 5px;
}

.chart-section {
    margin-bottom: 20px;
}

.chart-placeholder {
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #909399;
}

.chart-placeholder p {
    margin: 10px 0 5px 0;
    font-size: 16px;
}

.table-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #909399;
}

.table-placeholder p {
    margin: 10px 0 5px 0;
    font-size: 16px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .overview-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .overview-cards {
        grid-template-columns: 1fr;
    }

    .refresh-controls {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }

    .refresh-info,
    .refresh-actions {
        justify-content: center;
    }
}
</style>
